<template>
    <div class="laodingBox" v-if="props.show">
        <div v-if="!props.type || props.type == 'default'" class="loading"></div>
        <div v-else-if="props.type == 'page'" class="pageLoading"></div>
        <div v-else-if="props.type == 'btn'" class="loadingBtn"></div>
        <div v-else-if="props.type == 'dropDown'" class="dropDown" ref='dropDown'>
            <svg v-if="!props.loading && props.offset > 0" viewBox="0 0 63.657 63.657" xml:space="preserve" width="20px" height="20px" class="arrow" :class="props.offset > 49 ? 'arrowUp' : 'arrowDown'">
                <polygon points="31.891,63.657 0.012,35.835 2.642,32.821 31.886,58.343 61.009,32.824 63.645,35.832" fill="#AAA"></polygon>
                <rect x="29.827" width="4" height="60" fill="#AAA"></rect>
            </svg>
            <div v-else-if="props.loading" class="loadingDrop"></div>
        </div>
    </div>
</template>
<script>
export default {

    /*props: {
        type: 'default', //type
        show: false,
        offset : 0, //Offset distance
        loading : false, 
    */

    name: 'loading',

    props: ['props'],

}

</script>
<style scoped>
.dropDown {
    height: 50px;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -50px;
}

.dropDown .arrow,
.dropDown .arrowDown,
.dropDown .arrowUp {
    margin: auto;
    transition: transform .2s linear;
}

.dropDown .arrowDown {
    -webkit-transform: translateZ(0) rotate(0deg);
    transform: translateZ(0) rotate(0deg);
}

.dropDown .arrowUp {
    -webkit-transform: translateZ(0) rotate(180deg);
    transform: translateZ(0) rotate(180deg);
}

.pageLoading {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.pageLoading:after {
    position: fixed;
    z-index: 99999;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
    content: '';
    width: 100px;
    height: 100px;
    border-radius: 100px;
    -webkit-animation: loadingPage 1.0s infinite ease-in-out;
    animation: loadingPage 1.0s infinite ease-in-out;
    background: #fff;
}

@-webkit-keyframes loadingPage {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0
    }
}

@keyframes loadingPage {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

.loading,
.loadingBtn,
.loadingDrop {
    margin: 20px auto;
    border-radius: 100%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    border: 2px solid #9b9b9b;
    border-bottom-color: transparent;
    height: 20px;
    width: 20px;
    background: transparent;
    display: block;
    -webkit-animation: loadingDefault 1s 0s linear infinite;
    animation: loadingDefault 1s 0s linear infinite;
    clear: both;
    overflow: hidden;
}

.loadingBtn {
    margin: 10px auto;
    height: 12px;
    width: 12px;
    border-color: #fff;
    border-bottom-color: transparent;
}

.loadingDrop {
    margin: auto;
}

@keyframes loadingDefault {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

</style>
